<template>
  <div id="nav">
<!--    自定义样式 router-link默认是a标签-->
<!--    <router-link to="/" class="on">Home</router-link> |-->
    <router-link to="/home" >Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/user">User</router-link>|
<!--    自定义导航其它样式 使用插槽v-slot-->
    <router-link to="/about" custom v-slot="{ navigate }">
      <button @click="navigate" @keypress.enter="navigate" role="link">About Us</button>
    </router-link>
<!--    自定义样式使用路由全局变量 $router.push-->
<!--    高亮效果 $route.path 当前路径-->
    <button :class="{on:$route.path=='/user'}" @click="$router.push('/user')">个人中心</button>
    |
    <button @click="$router.go(-1)">返回</button>
    {{$route.path}}
  </div>
<!--  <router-view/>-->
<!--  视图另外一种写法-->
<!--  调用其它视图:命名视图 用name="user" user为路由的components的组内数据  没有的为缺省值-->
<!--  <router-view class="one" name="User"></router-view>-->
<!--  <router-view class="two"></router-view>-->
<!--  <router-view class="three" name="About"></router-view>-->
<!--  开启缓存
    组件除了第一次访问会被创建 以后都不会被创建
    除了排除之外的about
-->
  <router-view v-slot="{ Component }">
    <transition>
      <keep-alive exclude="About">
        <component :is="Component" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
.on{
  color: red !important;
}
.one{
  width: 25%;
  min-height: 300px;
  float: left;
  background: green;
}
.two{
  width: 50%;
  min-height: 300px;
  float: left;
  background: #888888;
}
.three{
  width: 25%;
  min-height: 300px;
  float: left;
  background: yellow;
}
</style>
